<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="page-breadcrumb">
            <el-breadcrumb-item>日志列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-form :inline="true" :model="queryForm" class="demo-form-inline" size="small">
            <el-form-item>
                <el-input
                    type="text"
                    v-model="queryForm.id"
                    placeholder="流水号"
                    @on-enter="onQuery"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-select
                    v-model="queryForm.type"
                    style="width:180px"
                    placeholder="操作类型"
                    clearable
                >
                    <el-option label="登陆" :value="0"></el-option>
                    <el-option label="新增用户" :value="1"></el-option>
                    <el-option label="开户" :value="2"></el-option>
                    <el-option label="用户基本信息编辑" :value="3"></el-option>
                    <el-option label="用户资源编辑" :value="4"></el-option>
                    <el-option label="新增角色" :value="5"></el-option>
                    <el-option label="编辑角色" :value="6"></el-option>
                    <el-option label="角色权限编辑" :value="7"></el-option>
                    <el-option label="角色关联用户编辑" :value="8"></el-option>
                    <el-option label="新增菜单" :value="9"></el-option>
                    <el-option label="菜单编辑" :value="10"></el-option>
                    <el-option label="日志查询" :value="11"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <tree-select-ex
                    width="260px"
                    placeholder="请选择所属组织"
                    v-model="queryForm.deptId"
                    :param="{dataFormat: 'list', key:{
                            isLeaf:e=>(!e.children||e.children.length<=0)&&(!e.subCount||e.subCount<=0)
                        }, async:{
                            enable: true, 
                            query:querySubDept, 
                        },
                        search: {
                            enable:true,
                            query:queryDept, 
                        }}"
                ></tree-select-ex>
            </el-form-item>
            <el-form-item></el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onQuery" icon="el-icon-search">查询</el-button>
            </el-form-item>
        </el-form>
        <table-ex ref="tableEx" :queryCallback="queryCallback">
            <el-table-column prop="id" label="流水号" width="120"></el-table-column>
            <el-table-column prop="userName" label="操作用户" width="120"></el-table-column>
            <el-table-column prop="deptName" label="组织机构" width="120"></el-table-column>
            <el-table-column prop="ip" label="IP地址" width="120"></el-table-column>
            <el-table-column prop="content" label="操作内容" minWidth="200"></el-table-column>
            <el-table-column prop="type" label="类型" width="120">
                <template slot-scope="scope">
                    <el-tag
                        size="small"
                        v-if="scope.row.type===0"
                        :disable-transitions="true"
                        effect="plain"
                    >登录</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===1"
                        :disable-transitions="true"
                        effect="plain"
                    >新增用户</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===2"
                        :disable-transitions="true"
                        effect="plain"
                    >开户</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===3"
                        :disable-transitions="true"
                        effect="plain"
                    >用户基本信息编辑</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===4"
                        :disable-transitions="true"
                        effect="plain"
                    >用户资源编辑</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===5"
                        :disable-transitions="true"
                        effect="plain"
                    >新增角色</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===6"
                        :disable-transitions="true"
                        effect="plain"
                    >编辑角色</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===7"
                        :disable-transitions="true"
                        effect="plain"
                    >角色权限编辑</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===8"
                        :disable-transitions="true"
                        effect="plain"
                    >角色关联用户编辑</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===9"
                        :disable-transitions="true"
                        effect="plain"
                    >新增菜单</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===10"
                        :disable-transitions="true"
                        effect="plain"
                    >菜单编辑</el-tag>
                    <el-tag
                        size="small"
                        v-else-if="scope.row.type===11"
                        :disable-transitions="true"
                        effect="plain"
                    >日志查询</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="opTime" label="操作时间" width="150"></el-table-column>
        </table-ex>
    </div>
</template>

<script>
import log_api from '../../api/log_api'
import dept_api from '../../api/dept_api'
import TableEx from '../../components/TableEx.vue'
import TreeSelectEx from '../../components/TreeSelectEx.vue'
export default {
    components: {
        TableEx,
        TreeSelectEx,
    },
    data() {
        return {
            queryForm: {},
            selectedItems: [],
        }
    },
    methods: {
        queryCallback(param) {
            return log_api.page({
                query: this.queryForm,
                ...param
            })
        },
        onQuery(event = null, type = 1) {
            this.$refs.tableEx.refresh(type)
        },
        querySubDept(key, callback) {
            dept_api.listSubDept(key).then(data => {
                data.forEach(e => e.name = e.abbreviation)
                callback(data)
            })
        },
        queryDept(keyword, callback) {
            dept_api.listDept(keyword).then(data => {
                data.forEach(e => e.name = e.abbreviation)
                callback(data)
            })
        },
    }
}
</script>

<style>
</style>